import React, {Component} from 'react';
// 引入connect 链接UI组件和redux
import {connect} from "react-redux";
import {Divider, Card} from 'antd';
// 引入action,用于创建action对象
import {
    createDecrementAction,
    createIncrementAction,
    createIncrementAsyncAction
} from "../../redux/actions/count_action";

// 定义UI组件
class Count extends Component {

    state = {privatePro: 'myPrivate'}

    increment = () => {
        const {value} = this.selectNumber;
        this.props.incrementCon(value * 1)
    }

    decrement = () => {
        const {value} = this.selectNumber;
        this.props.decrementCon(value * 1)
    }

    incrementIfOdd = () => {
        const count = this.props.count;
        if (count % 2 > 0) {
            const {value} = this.selectNumber;
            this.props.incrementCon(value * 1)
        }
    }

    incrementAsync = () => {
        const {value} = this.selectNumber;
        this.props.incrementAsyncCon(value * 1, 800)
    }

    render() {
        return (
            <div>
                <h2>当前求和为: {this.props.count}</h2>
                <select ref={c => this.selectNumber = c}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>
                &nbsp;&nbsp;
                <button onClick={this.increment}>+</button>
                &nbsp;&nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;&nbsp;
                <button onClick={this.incrementIfOdd}>结果奇数加</button>
                &nbsp;&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
                <Divider orientation="left"/>

                <Card title="Person Redux" bordered={true} style={{ width: 500 }} hoverable={true}>
                    {
                        this.props.personList.map( person =>{
                            return <p id={person.id}>{person.name} --- {person.age}</p>
                        })
                    }
                </Card>

            </div>
        );
    }
}

// 映射状态
// eslint-disable-next-line
const mapStateToProps = state => ({count: state})

// 映射操作的方法完整写法
// eslint-disable-next-line
const mapDispatchToProps = dispatch => (
    {
        incrementCon: number => dispatch(createIncrementAction(number)),
        decrementCon: number => dispatch(createDecrementAction(number)),
        incrementAsyncCon: (number, time) => dispatch(createIncrementAsyncAction(number, time)),
    }
)

export default connect(state => ({count: state.countReducer,personList: state.personReducer}),
    {
        incrementCon: createIncrementAction,
        decrementCon: createDecrementAction,
        incrementAsyncCon: createIncrementAsyncAction
    })(Count)


